<!--自动填充满中间剩余空间高度的容器，分上，中，下三部分-->
<template>
  <div class="app-container" >
    <div class="other" ref="other">
      <slot></slot>
    </div>
    <div class="top" ref="top">
      <slot name="top"></slot>
    </div>
    <div class="center" ref="center" :style="{height:bodyHeight+'px','overflow':'auto'}">
      <slot name="center"></slot>
    </div>
    <div class="bottom" ref="bottom">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    height: {
      type: String,
      default: null
    },
  },
  data() {
    return {
      // 可视区域高度
      visibleHeight: 200,
      observe:null,
    }
  },
  watch: {

  },
  computed: {
    //内容高度计算
    bodyHeight: function() {
      let height = this.height ? this.height : this.visibleHeight
      return height
    },
  },
  created() {

  },
  mounted() {
    // 监听容器大小
    this.observe = new ResizeObserver(entries => {
      this.setCenterHeight()
    })
    this.observe.observe(this.$el)
  },
  beforeDestroy () {
    this.observe.disconnect()
  },
  methods: {
    setCenterHeight(){
      this.$nextTick(() => {
        let centerTop=this.$refs.center.getBoundingClientRect().top
        let bottomHeight=this.$refs.bottom.getBoundingClientRect().height
        // 自动计算：当前可视区域高度 = 当前页面可视区域高度-当前中间内容距离顶部高度 - 页脚高度-当前底部内容高度
        const visibleHeight = document.body.clientHeight - centerTop - 40 - bottomHeight
        this.visibleHeight = visibleHeight > 200 ? visibleHeight : 200
      })
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
